<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/my.css" />
  </head>
  <body>
    <script src="./js/rem.js"></script>
    <header>
      <div class="login">
        <div class="avtat">
          <img src="./images/my/login.png" alt="" />
        </div>

        <h4>未登录</h4>
      </div>
      <i class="iconfont icon-comments-fill"></i>
    </header>
    <ul class="vip">
      <li>
        <p>视频vip</p>
        <span>vip首季50元</span>
      </li>
      <li>
        <p>体育vip</p>
        <span>首季50元</span>
      </li>
      <li>
        <p>免费vip</p>
        <span id="price-vip">最高领22天</span>
      </li>
      <li>
        <p>我的额度</p>
        <span>查询送vip</span>
      </li>
    </ul>
    <div class="history">
      <div class="title">
        <h4>我的创作号</h4>
        <i class="iconfont icon-double-arro-right"></i>
      </div>
    </div>
    <div class="history">
      <div class="title">
        <h4>播放历史</h4>
        <i class="iconfont icon-double-arro-right"></i>
      </div>
      <ul class="content"></ul>
    </div>

    <div class="onlyPerson">
      <h4>常用功能</h4>
      <ul></ul>
    </div>
    <ul class="config">
      <li>
        <i class="iconfont icon-set1"></i>
        <p>设置</p>
      </li>
      <li>
        <i class="iconfont icon-comments-fill"></i>
        <p>帮助与客服</p>
      </li>
    </ul>
    <!-- 底部导航 -->
    <footer>
      <a href="./index.html">
        <img src="./images/tabbar/2.png" alt="" />
        <p>首页</p>
      </a>
      <a href="./vip.html">
        <img src="./images/tabbar/4.png" alt="" />
        <p>vip</p>
      </a>
      <a href="./hotChat.html">
        <img src="./images/tabbar/1.png" alt="" />
        <p>热议</p>
      </a>
      <a href="./my.html">
        <img src="./images/tabbar/3-1.png" alt="" />
        <p>我的</p>
      </a>
    </footer>
    <div class="big-wrap">
      <div>
        <i class="iconfont icon-loading"></i>
        <p>登录中,请稍等。。。</p>
      </div>
    </div>
    <script>
      // 免费领取vip
      // 1.获取元素
      let priceVip = document.getElementById('price-vip')
      // 初始值是10
      let i = 10
      // 2.设置定时器
      let timer = setInterval(() => {
        // 3.每隔一秒i--
        priceVip.innerHTML = `
          免费时间${i--}
          `
          // 4.当i小于0时，清除定时器
        if (i < 0) {
          priceVip.innerHTML = `
          免费时间已用完
          `
          // 清除定时器
          clearInterval(timer)
        }
        // 5.每隔一秒执行一次
      }, 1000)
      // 6.当i小于0时，清除定时器
      let login = document.querySelector('.avtat')
      // 7.点击头像，显示登录框
      let bigWrap = document.querySelector('.big-wrap')
      // 8.点击登录框，隐藏登录框
      login.addEventListener('click', () => {
        // 显示登录框
        bigWrap.style.display = 'flex'
        // 隐藏登录框
        setTimeout(() => {
          bigWrap.style.display = 'none'
        }, 2000)
      })
      // 定义菜单数据
      let playHistory = [
        {
          img: './images/my/1.jpg',
          name: '偶像剧',
          info: '观看不足百分之一',
        },
        {
          img: './images/my/2.jpg',
          name: '亮剑',
          info: '观看不足百分之一',
        },
        {
          img: './images/my/3.jpg',
          name: '战狼',
          info: '观看不足百分之一',
        },
      ]
      // 1.获取元素
      let historyWrap = document.querySelector('.history .content')
      playHistory.forEach((item) => {
        historyWrap.innerHTML += `
          <li>
            <img src=${item.img} alt="" />
            <p>${item.name}</p>
            <span>${item.info}</span>
          </li>
          `
      })

      // 个人服务相关数据
      let onlyPersonData = [
        {
          icon: 'icon-collection-fill',
          name: '我的收藏',
          color: '#fb3c67',
        },
        {
          icon: 'icon-atm-away-fill',
          name: '我的预约',
          color: '#53d1bf',
        },
        {
          icon: 'icon-calculator-fill',
          name: '购买记录',
          color: '#45b7e7',
        },
        {
          icon: 'icon-video1',
          name: '本地视频',
          color: '#44b8e9',
        },
        {
          icon: 'icon-vip-fill',
          name: '会员兑换',
          color: '#fe9b24',
        },
        {
          icon: 'icon-signboard-fill',
          name: '超话广场',
          color: '#fe9b24',
        },
      ]
      let onlyPersonWrap = document.querySelector('.onlyPerson ul')
      onlyPersonData.forEach((item) => {
        onlyPersonWrap.innerHTML += `
          <li>
            <i class="iconfont ${item.icon}" style="color:${item.color}"></i>
            <p>${item.name}</p>
          </li>
          `
      })
    </script>
  </body>
</html>
